import React, {memo, useRef, forwardRef, useImperativeHandle} from 'react';

const HelloWorld = memo(forwardRef((props, ref) => {
  const inputRef = useRef();

  //子组件对父组件传入的 ref 进行处理
  useImperativeHandle(ref, () => {
    //返回的对象就会被当作当前传入的 ref 的 current 的值, 这样子组件可以选择暴露给父组件哪些内容
    return {
      focus() {
        console.log("focus");
        inputRef.current.focus();
      },
      setValue(value) {
        inputRef.current.value = value;
      }
    }
  })

  return (
      <div>
        {/*直接把所有权限暴露给父组件*/}
        {/*<input ref={ref} type="text"/>*/}

        {/*绑定当前组件的 ref, 使用 useImperativeHandle 暴露部分功能给父组件*/}
        <input ref={inputRef} type="text"/>
      </div>
  )
}));

/**
 * 传递给子组件一个ref, 子组件不直接使用绑定 ref, 而是对 ref 进行处理, 返回一个暴露对象
 */
const App = memo(() => {
  const titleRef = useRef();
  const inputRef = useRef();

  const handleDOM = () => {
    //父组件是获取不到子组件的其它内容的
    inputRef.current.value = "";
    //只能使用 useImperativeHandle 中返回的方法
    inputRef.current.focus();
    inputRef.current.setValue("哈哈哈")
  }

  return (
      <div>
        <h2 ref={titleRef}>哈哈</h2>
        <HelloWorld ref={inputRef}/>
        <button onClick={handleDOM}>DOM操作</button>
      </div>
  );
});

export default App;